<!-- <template>
    <div class="box">
        <div class="inner">
            <div class="logo">
                <img src="@/assets/images/logo.png" alt="">
                <img class="lg" src="@/assets/images/cn.png" alt="">
            </div>
            <el-form label-position="top" :rules="rules" label-width="80px" ref="user" :model="user">
                <el-form-item :label="$t('lang.account')" prop="account">
                    <el-input v-model="user.account"></el-input>
                </el-form-item>
                <el-form-item :label="$t('lang.password')" prop="password">
                    <el-input type="password" v-model="user.password" show-password></el-input>
                </el-form-item>
                <el-form-item :label="$t('lang.lang')">
                    <el-select v-model="lang" :placeholder="$t('lang.lang')" @change="changeLang">
                        <el-option :label="$t('lang.cs')" value="zh"></el-option>
                        <el-option :label="$t('lang.is')" value="en"></el-option>
                    </el-select>
                </el-form-item>
                <div class="btn-box">
                    <el-button type="primary" @click="sub('user')">{{ $t('lang.login') }}</el-button>
                    <el-button type="primary" plain>注册SenseCAP云平台账号</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template> -->

<template>
    <div class="box">
        <div class="inner">
            <div class="logo">
                <img src="@/assets/images/logo.png" alt="">
                <img class="lg" src="@/assets/images/cn.png" alt="">
            </div>
            <el-form label-position="top" :rules="rules" label-width="80px" ref="user" :model="user1">
                <el-form-item label="账号" prop="account">
                    <el-input v-model="user1.account"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="user1.password" show-password></el-input>
                </el-form-item>
                <el-form-item label="语言选择">
                    <el-select v-model="lang" placeholder="语言选择" @change="changeLang">
                        <el-option label="中文" value="zh"></el-option>
                        <el-option label="英文" value="en"></el-option>
                    </el-select>
                </el-form-item>
                <div class="btn-box">
                    <el-button type="primary" @click="sub('user')">登录</el-button>
                    <el-button type="primary" plain>注册SenseCAP云平台账号</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
export default defineComponent({
    name: 'loginView',
    setup() {
        const store = useStore()
        const router = useRouter()
        const user1=reactive({
            account:'',
            password:''
        })
        const Data = reactive({
            // user: {
            //     account: '',
            //     password: ""
            // },
            rules: {
                account: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                ],
            },
            lang: ''
        })
        const sub = (formName) => {
            // this.$refs[formName].validate((valid) => {
            //     if (valid) {
                    store.dispatch('LoginAction', user1)
            //     } else {
            //         console.log('error submit!!');
            //         return false;
            //     }
            // });
        }
        const changeLang = () => {
            store.commit('SET_LANG', this.lang);
            router.go(0)
        }
        return { ...toRefs(Data), user1, sub }
    }
    // data() {
    //     return {
    //         user: {
    //             account: '',
    //             password: ""
    //         },
    //         rules: {
    //             account: [
    //                 { required: true, message: '请输入账号', trigger: 'blur' },
    //                 { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
    //             ],
    //             password: [
    //                 { required: true, message: this.$t('lang.errorPsw'), trigger: 'blur' },
    //                 { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
    //             ],
    //         },
    //         lang:''
    //     };
    // },


    // methods: {
    //     sub(formName) {
    //         this.$refs[formName].validate((valid) => {
    //             if (valid) {
    //                 this.$store.dispatch('LoginAction', this.user)
    //             } else {
    //                 console.log('error submit!!');
    //                 return false;
    //             }
    //         });
    //     },
    //     changeLang(){
    //         this.$store.commit('SET_LANG',this.lang);
    //         this.$router.go(0)
    //     }
    // },
});
</script>

<style lang="less" scoped>
.box {
    background: #ccc;
    width: 100%;
    height: 100vh;
}

.inner {
    width: 320px;
    // height: 450px;
    padding: 50px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;

    .logo {
        text-align: center;

        img {
            height: 50px;
            width: auto;
        }

        .lg {
            position: absolute;
            top: 0;
            right: 0;
        }
    }
}

.btn-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.el-button {
    width: 100%;
    margin: 5px 0;
}
</style>